<template>
  <div class="virtual-lab-container">
    <h2 class="lab-title">铁与水蒸气反应</h2>

    <div class="scene-wrapper">
      <div class="reagent-source" v-if="isReagentVisible">
        <div
          class="iron-wool-draggable"
          draggable="true"
          @dragstart="handleDragStart"
        ></div>
        <span>拖动此铁粉</span>
      </div>
      <div v-else class="reagent-source-placeholder"></div>

      <div
        class="experiment-scene"
        @dragover.prevent
        @drop.prevent="handleDrop"
      >
        <div class="apparatus">
          <div class="flask">
            <div class="flask-water" :class="{ boiling: isWaterBoiling }">
              <div class="bubble" v-for="i in 15" :key="i" :style="getBubbleStyle()"></div>
            </div>
          </div>
          <div class="alcohol-lamp lamp1" :class="{ on: isHeating }"><div class="flame"></div></div>
          
          <div class="reaction-tube">
            <div v-if="isIronPlaced" class="iron-wool-in-tube" :class="{ glowing: isIronGlowing, blackened: isIronBlackened }"></div>
          </div>
          <div class="alcohol-lamp lamp2" :class="{ on: isHeating }"><div class="flame"></div></div>

          <div class="gas-collection-jar">
              <div class="jar-water">
                 <div class="collection-bubble" v-if="isGasCollecting" v-for="i in 10" :key="i" :style="getCollectionBubbleStyle()"></div>
              </div>
          </div>

          <div class="connect-tube-1"></div>
          <div class="connect-tube-2"></div>
        </div>
      </div>
    </div>

    <div class="info-panel">
      <p><strong>实验现象:</strong> {{ phenomenonText }}</p>
      <p>3Fe + 4H₂O(g) <span style="font-size:1.2em;">高温</span>→ Fe₃O₄ + 4H₂↑</p>
      <button @click="resetExperiment" :disabled="experimentState === 'idle' || experimentState === 'running'">
        重置实验
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// --- State Management ---
const experimentState = ref('idle'); // 'idle', 'running', 'finished'
const isReagentVisible = ref(true);
const phenomenonText = ref('请将左侧的铁粉拖入到右侧的反应管中。');

// --- Phenomenon Control ---
const isIronPlaced = ref(false);
const isHeating = ref(false);
const isWaterBoiling = ref(false);
const isIronGlowing = ref(false);
const isIronBlackened = ref(false);
const isGasCollecting = ref(false);

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

// --- Drag and Drop Logic ---
function handleDragStart(event) {
  event.dataTransfer.setData('reagent', 'iron_wool');
}

async function handleDrop(event) {
  const reagent = event.dataTransfer.getData('reagent');
  if (reagent === 'iron_wool' && experimentState.value === 'idle') {
    isReagentVisible.value = false;
    isIronPlaced.value = true;
    await startExperiment();
  }
}

// --- Main Experiment Logic ---
async function startExperiment() {
  experimentState.value = 'running';

  phenomenonText.value = '装置准备就绪，开始同时加热。';
  isHeating.value = true;
  await delay(2000);

  phenomenonText.value = '烧瓶中的水沸腾，产生水蒸气。';
  isWaterBoiling.value = true;
  await delay(2500);

  phenomenonText.value = '铁粉被加热至红热状态。';
  isIronGlowing.value = true;
  await delay(2500);

  phenomenonText.value = '红热的铁与水蒸气反应，生成黑色固体并产生氢气。';
  isIronBlackened.value = true;
  isGasCollecting.value = true;
  await delay(5000);

  phenomenonText.value = '反应结束。停止加热。';
  isHeating.value = false;
  experimentState.value = 'finished';
}

// --- Reset ---
function resetExperiment() {
  experimentState.value = 'idle';
  isReagentVisible.value = true;
  phenomenonText.value = '请将左侧的铁粉拖入到右侧的反应管中。';
  isIronPlaced.value = false;
  isHeating.value = false;
  isWaterBoiling.value = false;
  isIronGlowing.value = false;
  isIronBlackened.value = false;
  isGasCollecting.value = false;
}

// --- Dynamic Styles ---
const getBubbleStyle = () => ({ left: `${Math.random() * 80 + 10}%`, animationDuration: `${Math.random() * 1 + 0.8}s`, animationDelay: `${Math.random() * 1}s`});
const getCollectionBubbleStyle = () => ({ left: `${Math.random() * 70 + 15}%`, animationDuration: `${Math.random() * 2 + 1}s`, animationDelay: `${Math.random() * 5}s` });
</script>

<style scoped>
/* Base container and layout */
.virtual-lab-container { display: flex; flex-direction: column; width: 100%; height: 100%; background: #fdfdfd; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 20px; overflow: hidden; }
.lab-title { text-align: center; color: #334e68; margin-top: 0; }
.scene-wrapper { display: flex; align-items: center; justify-content: center; gap: 40px; flex-grow: 1; }

/* Reagent source on the left */
.reagent-source { text-align: center; cursor: grab; }
.reagent-source:active { cursor: grabbing; }
.iron-wool-draggable { width: 60px; height: 60px; background: radial-gradient(circle, #95a5a6, #596a7a); border-radius: 50%; margin: 0 auto 10px; }
.reagent-source-placeholder { width: 150px; }

/* Main experiment scene */
.experiment-scene { position: relative; width: 600px; height: 350px; display:flex; justify-content: center; align-items: center; }
.apparatus { position: relative; width: 100%; height: 100%; }

/* Stylized apparatus parts */
.flask, .reaction-tube, .gas-collection-jar, .alcohol-lamp {
  border: 4px solid #829ab1;
  background-color: #e0e6ed;
  position: absolute;
}
.alcohol-lamp { width: 60px; height: 70px; bottom: 40px; border-radius: 5px 5px 10px 10px; }
.alcohol-lamp .flame { position: absolute; top: -35px; left: 50%; transform: translateX(-50%); width: 22px; height: 40px; background: #fca503; border-radius: 50% 50% 10% 10% / 80% 80% 20% 20%; opacity: 0; transition: all 0.5s; }
.alcohol-lamp.on .flame { opacity: 1; }
.lamp1 { left: 50px; }
.lamp2 { left: 270px; }

.flask {
  width: 120px;
  height: 120px;
  bottom: 120px;
  left: 20px;
  border-radius: 50%;
  overflow: hidden;
}
.flask::before { content: ''; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border: 4px solid #829ab1; background: #e0e6ed; border-bottom: none; }
.flask-water { position: absolute; bottom: 0; width: 100%; height: 60%; background-color: #a7d8e8; transition: background-color 2s ease; }
.flask-water.boiling .bubble { position: absolute; bottom: -10px; background: rgba(255,255,255,0.7); border-radius: 50%; animation-name: rise-boil; animation-timing-function: linear; animation-iteration-count: infinite;}

.reaction-tube {
  width: 250px;
  height: 40px;
  bottom: 160px;
  left: 150px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iron-wool-in-tube { width: 100px; height: 28px; background: #7f8c8d; border-radius: 14px; transition: background-color 2s, box-shadow 1s; position: relative; }
.iron-wool-in-tube.glowing { box-shadow: 0 0 20px 5px #ff4848; }
.iron-wool-in-tube.blackened { background-color: #2c3e50; }

.gas-collection-jar { width: 80px; height: 120px; bottom: 90px; left: 450px; border-radius: 10px; border-bottom: none; background: rgba(224, 239, 243, 0.7); overflow: hidden; }
.jar-water { position: absolute; bottom: 0; width: 100%; height: 90%; background: #a7d8e8;}
.collection-bubble { position: absolute; bottom: 0; background: rgba(255,255,255,0.8); border-radius: 50%; width: 8px; height: 8px; animation-name: rise-collect; animation-timing-function: linear; animation-iteration-count: infinite; }

/* Decorative connecting tubes */
.connect-tube-1, .connect-tube-2 { position: absolute; background: #b0c4de; z-index: -1; }
.connect-tube-1 { width: 120px; height: 10px; bottom: 190px; left: 80px; }
.connect-tube-2 { width: 100px; height: 10px; bottom: 175px; left: 370px; transform: rotate(15deg); }


/* Info Panel */
.info-panel { margin-top: 20px; padding: 15px; text-align: center; background-color: #f0f4f8; border-radius: 8px; }
.info-panel p { margin: 8px 0; color: #486581;}
.info-panel button { margin-top: 10px; padding: 10px 25px; border: none; border-radius: 6px; background-color: #e74c3c; color: white; cursor: pointer; transition: background-color 0.3s; }
.info-panel button:disabled { background-color: #a0a0a0; cursor: not-allowed; }
.info-panel button:hover:not(:disabled) { background-color: #c0392b; }

/* Keyframes */
@keyframes rise-boil { to { transform: translateY(-80px); opacity: 0; } }
@keyframes rise-collect { to { transform: translateY(-100px); opacity: 0; } }
</style>